<template>
  <div >
    <div class="fixed-bar">
      <mu-tabs :value="activeTab" @change="handleTabChange" class="view-tabs">
        <mu-tab value="page1" title="首页"/>
        <mu-tab value="MenuWrapper" title="导航控制"/>
        <mu-tab value="page3" title="换肤"/>
        <mu-tab value="page4" title="消息列表"/>
        <mu-tab value="page5" title="新消息" ><span class="newNum">[{{this.$store.state.unreadNews.length}}]</span></mu-tab>
      </mu-tabs>
    </div>
    <div class="default-view">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>

  </div>
</template>

<script>
//  import {mapGetters,mapActions,mapMutations,mapState} from 'vuex';
  export default {
    name: 'index',
    data () {
      return {
        activeTab: 'page5',
        unreadNews:0
      }
    },
    created () {
      // 当created函数时监测路由信息,防止页面刷新tab高亮错误
      var tmpArr = this.$route.path.split('/')
      if (tmpArr[1] === 'index') {
        this.handleTabChange(tmpArr[2])
      }
      this.unreadNews=this.$store.state.unreadNews
//      console.log("unreadNews"+this.$store.state.unreadNews);
    },
    // watch函数监测路由的变化,保持tab面板的高亮位置正确
    watch: {
      '$route' (to, from) {
//        console.log(to);
//        console.log(from);
        const path = to.path
        var tmpArr = path.split('/')
        if (tmpArr[1] === 'index') {
          this.handleTabChange(tmpArr[2])
        }
      }
    },
    methods: {
      handleTabChange (val) {
        this.activeTab = val
        this.$router.push({ path: '/index/' + val })
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }

  .fixed-bar {
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    z-index: 15;
  }
  .newNum{
    color: red;
  }
</style>
